fix(table): virtualized table in firefox by replacing Spacer with css by wingkwong · Pull Request #5963 · heroui-inc/heroui

wingkwong · 2025-12-04T13:51:21Z

Closes [BUG] - Table has a Spacer causing issue when Wanting to Create a custom Table Design #2108
Closes [BUG] - Virtualized table is not rendered correctly on Firefox #5479

📝 Description

Spacer was used to add the spaces between the table header and body since applying margin to tr won't take any effect. However, using spacer would break virtualized table in firefox. Hence, this PR is to replace the spacer by css (adopting react-aria approach).

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Summary by CodeRabbit

Bug Fixes
- Resolved virtualized table rendering issues in Firefox by optimizing table structure and styling.
- Updated theme package dependency to ensure compatibility.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

changeset-bot · 2025-12-04T13:51:26Z

🦋 Changeset detected

Latest commit: eaa4fab

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages

Name	Type
@heroui/table	Patch
@heroui/theme	Patch
@heroui/react	Patch
@heroui/autocomplete	Patch
@heroui/checkbox	Patch
@heroui/date-input	Patch
@heroui/date-picker	Patch
@heroui/form	Patch
@heroui/input-otp	Patch
@heroui/input	Patch
@heroui/number-input	Patch
@heroui/radio	Patch
@heroui/select	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-12-04T13:51:27Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
heroui	Ready	Preview	Comment	Dec 4, 2025 1:52pm
heroui-sb	Ready	Preview	Comment	Dec 4, 2025 1:52pm

coderabbitai · 2025-12-04T13:51:45Z

Walkthrough

Removes the Spacer component dependency from the table component by replacing it with CSS pseudo-elements for spacing. The Spacer component is deleted from both virtualized and non-virtualized table implementations, with CSS styling added to the theme configuration to provide equivalent spacing.

Changes

Cohort / File(s)	Change Summary
Changelog & Dependency Updates `.changeset/brown-taxis-share.md`, `packages/components/table/package.json`	Added patch changelog entry for `@heroui/table` and `@heroui/theme` fix. Updated `@heroui/theme` peer dependency to >=2.4.23 and removed `@heroui/spacer` dependency.
Table Component Refactoring `packages/components/table/src/table.tsx`, `packages/components/table/src/virtualized-table.tsx`	Removed Spacer import and `<Spacer as="tr" tabIndex={-1} y={1} />` usage from both non-virtualized and virtualized table header row groups.
Theme CSS Replacement `packages/core/theme/src/components/table.ts`	Extended thead selector with CSS pseudo-element `after:content-[''] after:table-row after:h-[5px]` to replace Spacer component spacing.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10-15 minutes

Verify CSS pseudo-element replacement provides equivalent spacing to the removed Spacer component
Confirm Firefox rendering works correctly for virtualized tables (addresses #5479)
Test that custom table designs no longer experience spacing issues (addresses #2108)

Possibly related PRs

fix(table): sticky header & content placement in virtualized table #5184 — Modifies table header spacing and virtualized-table rendering by replacing spacer rows with CSS pseudo-elements and adjusting virtualized-table layout

Suggested reviewers

jrgarciadev

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: replacing Spacer with CSS to fix virtualized tables in Firefox, directly addressing the PR's core objective.
Description check	✅ Passed	The PR description includes issue references, clear explanation of the problem and solution, and before/after screenshots, but the 'Is this a breaking change' section is incomplete.
Linked Issues check	✅ Passed	The PR successfully addresses both issues: removes the problematic Spacer element (#2108) and fixes virtualized table rendering in Firefox (#5479) by replacing Spacer with CSS.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the Spacer issue: removing Spacer imports and usage, updating theme dependency, and adding CSS-based spacing via pseudo-elements.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix/table-spacer

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/core/theme/src/components/table.ts (1)

57-58: CSS-based header/body gap via thead::after looks sound

Using after:content-[''] after:table-row after:h-[5px] on thead is consistent with your existing content-[''] usage and should avoid the Firefox virtualization issues caused by a real Spacer row, while still preserving the visual gap. As an optional follow-up, consider documenting how consumers can remove this gap (e.g. via classNames.thead with after:content-none) to fully address the customization concerns from #2108.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f08dfb8 and eaa4fab.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (5)

.changeset/brown-taxis-share.md (1 hunks)
packages/components/table/package.json (1 hunks)
packages/components/table/src/table.tsx (0 hunks)
packages/components/table/src/virtualized-table.tsx (0 hunks)
packages/core/theme/src/components/table.ts (1 hunks)

💤 Files with no reviewable changes (2)

packages/components/table/src/table.tsx
packages/components/table/src/virtualized-table.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: ESLint
GitHub Check: Build
GitHub Check: TypeScript
GitHub Check: Continuous Release

🔇 Additional comments (1)

.changeset/brown-taxis-share.md (1)

1-6: Changeset accurately describes the scope of the fix

The packages and message line up with the actual change (table + theme patch for Firefox virtualized table via CSS spacer), so this is good to ship as-is.

pkg-pr-new · 2025-12-04T13:56:30Z

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5963

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5963

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5963

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5963

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5963

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5963

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5963

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5963

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5963

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5963

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5963

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5963

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5963

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5963

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5963

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5963

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5963

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5963

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5963

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5963

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5963

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5963

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5963

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5963

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5963

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5963

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5963

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5963

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5963

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5963

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5963

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5963

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5963

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5963

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5963

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5963

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5963

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5963

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5963

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5963

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5963

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5963

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5963

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5963

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5963

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5963

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5963

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5963

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5963

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5963

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5963

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5963

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5963

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5963

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5963

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5963

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5963

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5963

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5963

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5963

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5963

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5963

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5963

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5963

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5963

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@5963

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5963

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5963

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5963

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5963

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5963

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@5963

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5963

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5963

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5963

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5963

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5963

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5963

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5963

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5963

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5963

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5963

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5963

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5963

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5963

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5963

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5963

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@5963

commit: eaa4fab

wingkwong added 5 commits December 4, 2025 21:43

chore(deps): remove spacer and bump theme peer dependency

fd47eda

refactor(table): remove spacer

0e7cd88

fix(theme): replace spacer by css

5588ead

chore(changeset): add changeset

ca47dbc

chore(changeset): update changeset message

eaa4fab

wingkwong added this to the v2.8.6 milestone Dec 4, 2025

wingkwong requested a review from jrgarciadev as a code owner December 4, 2025 13:51

vercel Bot deployed to Preview – heroui December 4, 2025 13:52 View deployment

vercel Bot deployed to Preview – heroui-sb December 4, 2025 13:52 View deployment

coderabbitai Bot reviewed Dec 4, 2025

View reviewed changes

Comment thread packages/components/table/package.json

wingkwong merged commit b89ba08 into canary Dec 4, 2025
10 checks passed

wingkwong deleted the fix/table-spacer branch December 4, 2025 15:13

github-actions Bot mentioned this pull request Dec 4, 2025

ci(changesets): 📦 version packages #5820

Merged

recare-aj mentioned this pull request Apr 2, 2026

[BUG] - Table thead has an extra ::after pseudo-element spacer (5px) #6389

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(table): virtualized table in firefox by replacing Spacer with css#5963

fix(table): virtualized table in firefox by replacing Spacer with css#5963
wingkwong merged 5 commits into
canaryfrom
fix/table-spacer

wingkwong commented Dec 4, 2025 •

edited by coderabbitai Bot

Loading

Uh oh!

changeset-bot Bot commented Dec 4, 2025

Uh oh!

vercel Bot commented Dec 4, 2025 •

edited

Loading

Uh oh!

coderabbitai Bot commented Dec 4, 2025 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

pkg-pr-new Bot commented Dec 4, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

wingkwong commented Dec 4, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Summary by CodeRabbit

Uh oh!

changeset-bot Bot commented Dec 4, 2025

🦋 Changeset detected

Uh oh!

vercel Bot commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

pkg-pr-new Bot commented Dec 4, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

wingkwong commented Dec 4, 2025 •

edited by coderabbitai Bot

Loading

vercel Bot commented Dec 4, 2025 •

edited

Loading

coderabbitai Bot commented Dec 4, 2025 •

edited

Loading